<template>
  <div class="container">
    <div class="m-left">
      <div style="display: flex;justify-content: center;width: 100%;flex-direction: column;align-items: center;">
        <img :src="shoes.img" class="m-img">
        <span style="margin-top:10px;">{{shoes.name}}</span>
      </div>
      <div class="m-title" style="margin-top: 20px;">
        <span style="font-size: 18px;font-weight: 700;">基本信息</span>
        <span id="info-edit" @click="editFunc" v-if="readOnly==true">编辑</span>
        <span id="info-edit" @click="editFunc" v-else>完成</span>
      </div>
      <div class="m-info">
        <div class="info-row">
          <span class="info-lt">商品名称: </span>
          <el-input class="info-rt" v-model="shoes.name" :readonly='readOnly'></el-input>
        </div>
        <div class="info-row">
          <span class="info-lt">商品价格: </span>
          <el-input class="info-rt" v-model="shoes.price" :readonly='readOnly'></el-input>
        </div>
        <div class="info-row">
          <span class="info-lt">商品类型: </span>
          <el-select v-model="shoes.type" class="info-rt" :disabled="readOnly">
            <el-option v-for="item in listClassification" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </div>
        <div class="info-row">
          <span class="info-lt">商品状态: </span>
          <el-select v-model="shoes.status" class="info-rt" :disabled="readOnly">
            <el-option v-for="item in listState" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </div>
      </div>
    </div>

    <div class="m-right" >
      <el-row gutter="20">
        <el-col :xs="24" :md="24" :lg="12" :xl="12">
          <div class="m-card">
            <barchart/>
            <span>商品库存信息</span>
          </div>
        </el-col>
        <el-col :xs="12" :sm="12" :md="12" :lg="6" :xl="6">
          <div class="m-card">
            <piechart :chartData="piechartData"/>
            <span>商品状态体系</span>
          </div>
        </el-col>
        <el-col :xs="12" :sm="12" :md="12" :lg="6" :xl="6">
          <div class="m-card">
            <piechart :chartData="piechartData1"/>
            <span>商品评价体系</span>
          </div>
        </el-col>
      </el-row>

      <div class="m-body">
        <span style="font-size: 18px;font-weight: 600;margin-bottom: 10px;">商品评价</span>
        <div class="pjPane">
          <div class="pj-date">
            <span class="date-day">04</span>
            <span class="date-else">2021-11</span>
            <svg-icon icon-class="connect" class-name="pj-icon"></svg-icon>
          </div>
          <div class="pj-body">
            <div class="pj-body-side"></div>
            <div class="pj-body-main">
              <div class="pj-body-top">
                <span class="pj-body-user">兰澈</span>
                <span class="pj-body-status"><span>好评</span></span>
              </div>
              <div class="pj-desc">
                <span>鞋子物美价廉，值得购买</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
import axios from 'axios'
import piechart from "./components/piechart.vue"
import barchart from './components/barchart.vue'
import piechart1 from './components/piechart1.vue'


var piechartData={
  dataName:["下单","收藏","加购"],
  data:[
    { value:100,name:"下单"},
    { value:123,name:"收藏"},
    { value:88,name:"加购"}
  ]
}
var piechartData1={
  dataName:["好评","中评","差评"],
  data:[
    { value:188,name:"好评"},
    { value:88,name:"中评"},
    { value:12,name:"差评"}
  ]
}

export default{
  components:{
    piechart,
    barchart,
    piechart1
  },
  data(){
    return{
      piechartData:piechartData,
      piechartData1:piechartData1,
      readOnly:true,
      shoes:{
        name:'绝影CRC 紫色',
        img:'https://img-blog.csdnimg.cn/7ec94d94ea754803a665d65e25a1c2ca.png',
        type:'跑步鞋',
        status:'未上架',
        price:899.00
      },
      listClassification: [{
        value: "跑步鞋",
        label: "跑步鞋"
      }, {
        value: "休闲鞋",
        label: "休闲鞋"
      }, {
        value: "篮球鞋",
        label: "篮球鞋"
      }],
      listState: [{
          value: "已上架",
          label: "已上架",
          iconClass: "commodityOn",
          iconColor: "icon-on"
        },
        {
          value: "未上架",
          label: "未上架",
          iconClass: 'commodityNot',
          iconColor: 'icon-not'
        },
        {
          value: "已下架",
          label: "已下架",
          iconClass: 'commodityOff',
          iconColor: 'icon-off'
        }
      ],
    }
  },
  methods:{
    editFunc(){
      console.log(this.$data.readOnly)
      if(this.$data.readOnly==false){
        this.$confirm('确定要修改商品信息吗?','提示',{
          confirmButtonText:'确定',
          cancelButtonText:'取消',
          type:'warning'
        })
        .then(res=>{
          this.$axios.post('/shoes/updateDesc',this.$data.shoes,{
            headers:{
              'Content-Type': 'application/json'
            }
          }).then(res=>{
            console.log(res);
            this.$data.shoes=res.data[0]
            console.log(this.$data.shoes)
          })
          .catch(error=>{
            console.log(error);
          })
        })
      }
      else{

      }
      this.$data.readOnly=!this.$data.readOnly;
      console.log(this.$data.readOnly)
    }
  },
  created(){
    var shoes_id=this.$route.query.shoes_id;
    console.log(shoes_id);
    const data={
      shoes_id:shoes_id
    }
    this.$axios.post('/shoes/getDesc',data,{
      headers:{
        'Content-Type': 'application/json'
      }
    }).then(res=>{
      console.log(res);
      this.$data.shoes=res.data[0]
      console.log(this.$data.shoes)
    })
    .catch(error=>{
      console.log(error);
    })
  }

}

</script>

<style lang="scss" scoped>
.container{
  display: flex;
  width: 100%;
  height:100%;
  padding:30px;
  background-color: #f0f2f5;
  $borderRadius:10px;

  #info-edit{
    cursor: pointer;
    color:#008bed;
  }

  .m-left{
    padding:20px;
    width:300px;
    min-height:630px;
    background-color: #fff;
    margin-right:30px;
    border-radius: $borderRadius;

    .m-img{
      border: 2px solid #d7dae0;
      border-radius: 20px;
      width:140px;
    }

    .m-info{
      width:100%;
      display: flex;
      margin-top:20px;
      flex-direction: column;

      .info-row{
        width: 100%;
        display: flex;
        align-items: center;
        margin-bottom:10px;

        .info-lt{
          width: 100px;
        }

        .info-rt{
          width:100px;
        }

      }
    }


  }

  .m-right{
    width:100%;
    height:100%;
    display: flex;
    flex-direction: column;
  }

  .m-card{
    display: flex;
    flex-direction: column;
    width: 100%;
    padding:10px 0;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    background-color: #fff;
    margin-bottom:20px;

    span{
      margin-top:10px;
    }
  }

  .m-title{
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .m-body{
    width:100%;
    height:100%;
    padding:20px;
    background-color: #fff;
    border-radius:10px;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .pjPane{
    margin-top:10px;
    width:100%;
    height:90px;
    display: flex;
    align-items: center;

    .pj-date{
      width:80px;
      height:100%;
      display: flex;
      flex-direction: column;

      .pj-icon{
        height:auto;
        width:30px;
        color: #68a4ff;
      }

      .date-day{
        color:#6e6e7e;
        font-size:20px;
        margin-bottom: 5px;
        font-weight: 600;
      }

      .date-else{
        color:#afafaf;
      }
    }

    .pj-body{
      width: 100%;
      height:100%;
      background-color: #f3f4f7;
      border-radius: 10px;
      overflow: hidden;
      display: flex;
      $good:#000;
      $normal:#000;
      $bad:#000;

      .pj-body-side{
        width:15px;
        height:100%;
        background-color:#68a4ff;
      }
      .pj-body-main{
        width: 100%;
        height:100%;
        display: flex;
        flex-direction: column;

        .pj-body-top{
          width: 100%;
          height:50px;
          padding:0 20px;
          display: flex;
          align-items:center;

          .pj-body-user{
            color:#434343;
            font-size: 16px;
            font-weight: 600;
          }

          .pj-body-status{
            margin-left: 20px;
            font-size: 12px;
            height:20px;
            padding:0 8px;
            border:1px solid #000;
            border-radius: 15px;
            display: flex;
            justify-content: center;
            align-items: center;
          }

        }

        .pj-desc{
          padding:5px 20px;
          color:#838383;
        }
      }
    }
  }
}
</style>
